<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<!-- The examples use the SVN trunk so they always get the latest versoin --> 
<script src="http://moocanvasshadow.googlecode.com/svn/trunk/js/mootools-1.2-core.js" type="text/javascript"></script>
<script src="http://moocanvasshadow.googlecode.com/svn/trunk/js/moocanvas.js" type="text/javascript"></script>
<script src="http://moocanvasshadow.googlecode.com/svn/trunk/js/mooCanvasShadow.js" type="text/javascript"></script>


<script type="text/javascript">
<!--	

window.addEvent('domready',function(){

	// Select the elements by class
	$$('.shadow').each(function(elmt){
		shadow(elmt);
	});
	
	/**
	 * Craete a simple function to add a shadow to a element
	 * @param {Object} elmt
	 */
	function shadow(elmt){
		elmt.mooCanvasShadow({
			opacity: 0.2,
			size: 13,
			radius: 15,
			color: '#FFFFFF',
			// Because this function could be called more than once, becouse of the onResize event
			// you must set the overwrite option to true
			overwrite: true 
		});	
	}
	
	/*
	 * #shadow2 is relative to the bottom and right side of the window
	 * When the window get resized, #shadow2 will move, so the shadow 
	 * must be recalculated
	 */
	window.addEvent('resize',function(){
		shadow($('shadow2'));
	});
	
})

//-->
</script>

<style type="text/css">

/*
 * Some sample CSS 
 * It is important that your margins and paddings or your body element are set to 0!
 */

body {
	background: #858282;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: white;
	padding: 0;
	margin: 0;
}

.shadow {
	width: 300px;
	padding: 20px;
	margin: 50px;
	background: #444;
	text-align: justify;
	float: left;
}

#shadow2 {}

#shadow2 pre {
	overflow: auto;
	font-size: 12px;
	width: 300px;
}

</style>

<title>MooCanvasShadow</title>
</head>
<body>

<!-- As you can see, this is just some simple html, you don't have to change here anything! :D -->


<div class="shadow">
	<h2>This is an example with selecting the elements with a class name</h2>
	<h3>So check out the source code !</h3>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sit amet risus. Etiam neque pede, sodales at, eleifend at, lobortis in, lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dolor nibh, pulvinar non, lacinia vitae, pulvinar eget, orci. Aenean eros purus, lobortis in, semper sed, sagittis vel, odio. Donec metus neque, malesuada non, viverra quis, lobortis eget, tortor. Nulla facilisi. Cras pulvinar. Curabitur et nunc et tellus congue fermentum. Praesent enim eros, ultrices sed, volutpat vel, vestibulum et, ipsum. In hac habitasse platea dictumst. Sed pellentesque justo vel mi. Vestibulum porta dolor at elit. Donec sit amet tortor. Duis porta est a orci. Donec ante. Donec quis libero eu lectus rutrum tempus. Duis et nisl eu massa ultrices varius. Fusce sed metus. Donec id ipsum.	
</div>

<div class="shadow" id="shadow2">
	<h1>The Javascript</h1>
	<code>
		<pre>
// Select the elements by class
$$('.shadow').each(function(elmt){
	shadow(elmt);
});

/**
 * Craete a simple function to add a shadow to a element
 * @param {Object} elmt
 */
function shadow(elmt){
	elmt.mooCanvasShadow({
		opacity: 0.2,
		size: 13,
		radius: 15,
		color: '#FFFFFF',
		// Because this function could be called more than once, because of the onResize event
		// you must set the overwrite option to true
		overwrite: true 
	});	
}

/*
 * #shadow2 is relative to the bottom and right side of the window
 * When the window get resized, #shadow2 will move, so the shadow 
 * must be recalculated
 */
window.addEvent('resize',function(){
	shadow($('shadow2'));
});
			
		</pre>
	</code>
</div>


</body>
</html>